<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="fragments/layout">
<head>
    <title>权限管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/H-UI/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css}" />
</head>
<body>
<!--这个模板是继承模板只能替换内容。并且只能在head部分添加自己的js css.
    body中不能写任何的数据，如果body中的模块不是 继承模板中的内容都会被替换掉。
-->

<section class="Hui-article-box" layout:fragment="content">
    <!--导航条提示-->
    <nav class="breadcrumb"><i class="Hui-iconfont"></i> <a href="/" class="maincolor">首页</a> <span class="c-999 en">&gt;</span><span class="c-666">权限管理</span> <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <!--导航条提示-->
    <!--页面主体-->
    <div class="Hui-article">
        <article class="cl pd-20">
            <div class="cl pd-5 bg-1 bk-gray mt-10">
                <span class="l">
                    <a class="btn btn-primary radius" href="javascript:;" onclick="add_per()"><i class="Hui-iconfont"></i> 添加权限</a>
                </span>
               </div>

            <div class="mt-10">
                <div class="col-xs-3">
                    <ul id="rootTree" class="ztree"></ul>
                </div>
                <div class="col-xs-9">
                    <table class="table table-border table-bordered table-hover table-bg">
                        <thead>
                        <tr>
                            <th scope="col" colspan="4">权限详情</th>
                        </tr>
                        <tr class="text-c">

                            <th width="40">ID</th>
                            <th width="100">权限名称</th>
                            <th width="200">URL</th>
                            <th >描述</th>

                        </tr>
                        </thead>
                        <tbody>

                        <tr class="text-c" >
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>

                        </tr>


                        </tbody>
                    </table>
                </div>

            </div>

        </article>
    </div>
    <!--页面主体-->
    <!--右键菜单的样式-->
    <style type="text/css">
        div#rMenu {position:absolute; visibility:hidden; top:0;  text-align: left;padding: 2px;z-index: 99999;}

        div#rMenu ul{
            margin: 5px 0;
            padding: 0 8px;
            list-style: none outside none;
        }
        div#rMenu ul li{
            border-bottom:1px solid #D2D2D2;
            cursor: pointer;
        }
    </style>
    <!--zTree右键菜单-->
    <div id="rMenu">
        <ul class="dropDown-menu menu radius box-shadow">
            <li id="m_add"  onclick="add_per();">添加权限</li>
            <li id="m_edit" onclick="edit_per();">编辑权限</li>
            <li id="m_del"  onclick="del_per();">删除权限</li>
        </ul>
    </div>
</section>

<div layout:fragment="footerjs">

    <script type="text/javascript" th:src="@{/H-UI/lib/laypage/1.2/laypage.js}"></script>
    <script type="text/javascript" th:src="@{/H-UI/lib/zTree/v3/js/jquery.ztree.all-3.5.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/permission/index.js}"></script>

</div>


</body>
</html>